<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: red;
    }
  </style>
  <!-- 1. 引入两个JS文件（ 注意引入顺序 ） -->
  <!-- 提供React对象 -->
  <!-- <script src="https://unpkg.com/react@16/umd/react.development.js"></script> -->
  <script src="./js/react.development.js"></script>
  <!-- 提供ReactDOM对象  注意DOM是全大写的   react-dom是react的插件-->
  <!-- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> -->
  <script src="./js/react-dom.development.js"></script>
</head>
<body>

  <!-- 2. 准备一个空div  div容器 -->
  <div id="root" class="xxxx"></div>
  <script>
    /* 3. 创建react元素(也称为虚拟DOM/虚拟节点, 不是真实DOM) */
    /* 
    React.createElement(
      type,  // 标签名   h1
      [props], // 标签属性 {title: '你好, React!'}
      [...children] // n个所有子节点  Hello React!
    )
    */
    const element = React.createElement(
      'h1',
      /* 
      在原生DOM和react虚拟DOM中, 都是用className来代表html标签中的class属性
        为什么? 在js中class是关键字, 属性性名不能取class
      */
      {title: '你好, React!', className: 'active'},
      'Hello React!'
    )
    console.dir(document.getElementById('root'))
    console.log(element)
    /* 
    理解React元素/虚拟DOM/虚拟节点    与真实DOM进行比较
    1. 它就是一个普通的JS对象, 它不是真实DOM元素对象
      虚拟DOM: 属性比较少  ==> 较轻的对象
      真实DOM: 属性特别多  ==> 较重的对象
    2. 但它有一些自己的特点
      虚拟DOM可以转换为对应的真实DOM  => ReactDOM.render方法将虚拟DOM转换为真实DOM再插入页面中
      虚拟DOM对象包含了对应的真实DOM的关键信息属性
        标签名 => type: "h1"
        标签属性 => props: {title: '你好, React!'}
        子节点 => props: {children: 'Hello React!'}
    */



    /* 4. 渲染React元素到页面的容器div中 */
    /* 
    ReactDOM.render(
      element, // React元素
      container // 页面上的容器元素
    )
    */
    ReactDOM.render(element, document.getElementById('root'))
    // ReactDOM.render(element, document.querySelector('#root'))
  </script>
</body>
</html>